<template>
	<view>
		<view class="tabbox1">
			<view v-for="(tab, index) in tabs" :key="index" class="tab1" :class="{'active': currentTab === index}"
				@click="currentTab = index">
				{{ tab }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>

		<view v-show="currentTab === 0" class="boxnr1">
			<view class="page">
				<view class="qh2">
					<view class="daybox">
						<view class="xq">周日</view>
						<view class="rq">08/11</view>
					</view>
					<view class="daybox">
						<view class="xq">周一</view>
						<view class="rq">08/12</view>
					</view>
					<view class="daybox">
						<view class="xq">周二</view>
						<view class="rq">08/13</view>
					</view>
					<view class="daybox">
						<view class="xq">周三</view>
						<view class="rq">08/13</view>
					</view>
				</view>
				<view class="bisai">
					<view class="riqi">
						<view class="text1">周二001.亚冠</view>
						<view class="text2">完场 08-13 20:00</view>
					</view>
					<view class="box">
						<view class="team">
							<view class="teamnr1">
								<view class="image1">
									<image class="img1" src="../../static/logo.png"></image>
								</view>
								<view class="text3">山东泰山</view>
							</view>
							<view class="teamnr2">
								<view class="text4">竞彩sp 2.50 3.20 2.40</view>
							</view>
						</view>
						<view class="bifen">
							<view class="text5">1:0</view>
							<view class="text6">上半场0:0</view>
						</view>
						<view class="team">
							<view class="teamnr1">
								<view class="image1">
									<image class="img1" src="../../static/logo.png"></image>
								</view>
								<view class="text3">曼谷联</view>
							</view>
							<view class="teamnr2">
								<view class="text4">主（-1）5.55 4.45 1.38</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="currentTab === 1" class="boxnr1">
			<view class="page">第二个页面的内容</view>
		</view>
		<view v-show="currentTab === 2" class="boxnr1">
			<view class="page">第三个页面的内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中第一个tab
				tabs: ['竞彩', '北单', '足彩'] // tab 标题数组
			};
		}
	};
</script>

<style>
	.tabbox1 {
		width: 96%;
		padding: 2%;
		background-color: red;
		display: flex;
		justify-content: space-between;
		/* 平分空间 */
	}

	.tab1 {
		width: 29.33%;
		padding: 2%;
		color: #eb899a;
		text-align: center;
		font-size: 35rpx;
		transition: color 0.3s;
		/* 平滑过渡效果 */
		cursor: pointer;
		/* 鼠标指针变为手型 */
		position: relative;
		/* 用于定位伪元素 */
	}

	.active {
		position: relative;
		color: white;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 116rpx;
		height: 10rpx;
		background-color: #fce9e9;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: -8px auto;
	}

	/* 添加下划线样式 */
	/* 	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		background-color: white;
	} */

	.boxnr1 {
		width: 100%;
		height: 70vh;
		/* display: none; 移除 display: none */
		background-color: paleturquoise;
	}





	.qh2 {
		width: 96%;
		display: flex;
		background-color: white;
		padding: 2%;
	}

	.daybox {
		width: 25%;
		text-align: center;
		font-size: 20rpx;
		color: black;
	}

	.riqi {
		display: flex;
		padding: 2%;
	}

	.text1 {
		font-size: 30rpx;
		margin-right: 3%;
		color: #7e7e7e;
	}

	.text2 {
		font-size: 30rpx;
		color: red;
	}

	.box {
		width: 96%;
		display: flex;
		padding: 2%;
	}

	.team {
		width: 35%;
		padding: 2.5%;
	}

	.teamnr1 {
		display: flex;
		padding: 2%;
	}

	.image1 {
		width: 25%;
		margin-right: 4%;
	}

	.img1 {
		width: 100%;
		height: 60rpx;
	}

	.text3 {
		font-size: 32rpx;
	}

	.teamnr2 {
		/* font-size: 37rpx; */
		padding: 2%;
	}

	.text4 {
		font-size: 20rpx;
		color: #7e7e7e;
	}

	.bifen {
		width: 16%;
		padding: 2%;
	}

	.text5 {
		font-size: 45rpx;
		color: red;
	}

	.text6 {
		font-size: 24rpx;
		color: red;
	}
</style>
